<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Fxl console</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="../css/semantic.min.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/global.css">
	<script type="text/javascript" src="../js/libs/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/libs/semantic.min.js"></script>
</head>
<body>
	<div class="ui grid" style="width: 100%">
		<div class="row">
			<div class="three wide column">
				<div class="ui vertical menu top attached inverted raised">
					<div class="brand item">
						<i class="braille icon"></i>FXLINKED
					</div>
					<a class="link item active">
						<i class="chart bar outline icon"></i>
						Dashboard
					</a>
					<a class="link item">
						<i class="address book outline icon"></i>
						My Acount
					</a>
					<a class="link item"><i class="users icon"></i>Sub Partners</a>
					<a class="link item"><i class="print icon"></i>Withdraw</a>
					<a class="link item"><i class="wrench icon"></i>Marketing Tools</a>
					<a class="link item"><i class="file alternate outline icon"></i>Report</a>
				</div>
			</div>
			<div class="thirteen wide column">
				<div class="ui menu" style="font-size: smaller;">
					<div class="ui container">
						<div id="department-select" class="item ui dropdown">
							<div class="default text">Department</div>
							<i class="dropdown icon"></i>
						</div>
						<div class="right menu">
							<div class="link item">
								<i class="envelope outline icon"></i>	<span class="ui label circular tiny red">4</span>							
							</div>
							<div class="link item">My Profile</div>
							<div class="link item">My Tasks</div>
							<div class="link item">Sign Out</div>
							<div class="item"><img src="../images/avatar_03.jpg" alt="" class="ui image circular mini"></div>
						</div>
					</div>
				</div>
				<div class="ui segment basic">
					<h1 class="ui header dividing">Dashboard</h1>
				</div>
				<div class="ui four column grid">
					<div class="row">
						<div class="column">
							<div class="ui card raised">
								<div class="content">
									<div class="left aligned">
										<i class="folder icon orange"></i>
									Leads</div>
									<div class="ui divider"></div>
									<h1 class="ui header left aligned">589</h1>
								</div>								
							</div>
						</div>
						<div class="column">
							<div class="ui card raised">
								<div class="content">
									<div class="left aligned">
										<i class="folder icon orange"></i>
									Books</div>
									<div class="ui divider"></div>
									<h1 class="ui header left aligned">1098</h1>
								</div>								
							</div>
						</div>
						<div class="column">
							<div class="ui card raised">
								<div class="content">
									<div class="left aligned">
										<i class="folder icon orange"></i>
									Income</div>
									<div class="ui divider"></div>
									<h1 class="ui header left aligned">201</h1>
								</div>								
							</div>
						</div>
						<div class="column">
							<div class="ui card raised">
								<div class="content">
									<div class="left aligned">
										<i class="folder icon orange"></i>
									Active Users</div>
									<div class="ui divider"></div>
									<h1 class="ui header left aligned">126</h1>
								</div>								
							</div>
						</div>
					</div>
				</div>
				<div class="ui two column grid">
					<div class="row">
						<div class="column">
							<div class="ui card fluid">
								<div class="content">
									<div>
										<i class="file outline orange icon"></i>
										Summary
									</div>
									<div class="ui divider"></div>
									<div class="ui grid">
										<div class="column">
											<div class="ui list relaxed">
												<div class="item">
													Deal Type
													<div class="f-right">CPA</div>
												</div>
												<div class="item">
													Commission
													<div class="f-right">$ <b>996</b></div>
												</div>
												<div class="item">
													Director
													<div class="f-right">Waston</div>
												</div>
											</div>											
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="ui card fluid">
								<div class="content">
									<div>
										<i class="chart line orange icon"></i>
										Account Statistic
									</div>
									<div class="ui divider"></div>
									<div class="ui two column grid">
										<div class="column">
											<div class="ui list">
												<div class="item">
													<b>Total Live Accounts</b>
													<div class="f-right"><span class="ui mini circular label">20</span></div>
												</div>
												<div class="item">
													Active Accounts
													<div class="f-right"><span class="ui mini circular label orange">12</span></div>
												</div>
												<div class="item">
													Inactivie Accounts
													<div class="f-right"><span class="ui mini circular label">8</span></div>
												</div>												
											</div>
										</div>
										<div class="column right aligned">
											<img src="../images/logo.jpg" style="height:80px;" class="ui image">
										</div>
										
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>			
		</div>
	</div>
</body>
<script>
$(function(){
	$('#department-select').dropdown({
		values:[
			{
				name:'Boss',
				value:'Boss'				
			},
			{
				name:'Finance',
				value:'Finance',
				selected:true
			},
			{
				name:'Sales',
				value:'Sales'
			},
			{
				name:'Delivery',
				value:'Delivery'
			}
		]
	})
})
</script>
</html>